<template>
	<view class="m-t40">
		<view class="flex">
			<view class="line" />
			<text class="text-700-130">最新动态</text>
		</view>

		<view class="section">
			<view
				v-for="item in list"
				:key="item.id"
				class="card flex"
				:data-url="'/pages/dynamic-details/dynamic-details?id=' + item.id"
				@click="goto"
			>
				<image class="cover" :src="item.cover" mode="aspectFill" />

				<view class="flex-1 flex-d-sb m-l20">
					<text class="text-700-130">{{ item.title }}</text>
					<text class="text-400-128 m-t10">{{ item.intro }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useNavigator } from "@/hooks/use-navigator";
import { ref } from "vue";

const { goto } = useNavigator();
const list = ref([]);
async function getList() {
	const res = await uni.$u.get("/dongtai/lst");
	list.value = res.data;
}
getList();
</script>

<style lang="scss" scoped>
.line {
	width: 8rpx;
	height: 26rpx;
	margin-right: 20rpx;
	background-color: $bg-color-2;
}

.section {
	margin-top: 30rpx;
	padding: 0 20rpx;
	border-radius: 20rpx;
	background-color: $bg-color-1;

	.card {
		height: 190rpx;
		border-bottom: 1rpx solid $border-color-4;

		&:last-child {
			border: none;
		}

		.cover {
			width: 148rpx;
			height: 148rpx;
			border-radius: 10rpx;
			border: 1rpx solid $border-color-4;
		}
	}
}
</style>
